<template>
  <div v-loading="loading">
    <el-form
      ref="form"
      :model="form"
      :rules="rules"
      label-width="120px"
      class="dataForm"
    >
      <el-row>
        <!-- <el-col :span="12">
          <el-form-item :label="$t('表单设计id')" prop="desformId">
            <el-input v-model="form.desformId" :placeholder="$t('表单设计id')" show-word-limit maxlength="16" />
          </el-form-item>
        </el-col> -->
        <el-col :span="24">
          <el-form-item :label="$t('表单设计名称')" prop="desformName">
            <el-input
              v-model="form.desformName"
              :placeholder="$t('表单设计名称')"
            />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item :label="$t('表单设计编码')" prop="desformCode">
            <el-input
              v-model="form.desformCode"
              :placeholder="$t('表单设计编码')"
              @blur="handleDesformCodeBlur"
            />
          </el-form-item>
        </el-col>

        <el-col :span="24">
          <el-form-item label="关联online设计表" prop="onlineFormDataId">
            <el-select v-model="form.onlineFormDataId" placeholder="请选择">
              <el-option
                v-for="item in relevancyOnlineOption"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="是否关联业务类型">
            <el-switch
              v-model="form.isRelevance"
              active-color="#1abc9c"
              inactive-color="#e74c3c"
              @change="isRelevanceChange"
            />
          </el-form-item>
        </el-col>
        <el-col v-if="form.isRelevance" :span="24">
          <el-form-item label="业务类型" prop="relevanceType">
            <el-select v-model="form.relevanceType" placeholder="请选择">
              <el-option
                v-for="item in businessTypeOption"
                :key="item.value"
                :label="item.title"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="关联字段" prop="relevanceField">
            <el-input
              v-model="form.relevanceField"
              :placeholder="$t('关联字段')"
            />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item :label="$t('备注')">
            <el-input
              v-model="form.remark"
              type="textarea"
              :placeholder="$t('请描述用途')"
            />
          </el-form-item>
          <el-divider />
        </el-col>
      </el-row>
    </el-form>
    <div slot="footer" class="dialog-footer" style="text-align: right">
      <!--保存 取消按钮-->
      <el-checkbox
        v-if="checkFlag"
        v-model="openDes"
        style="float: left; line-height: 36px"
      >添加后自动打开设计</el-checkbox>
      <save-btn has-permi="system:data" />
    </div>
  </div>
</template>

<script>
import { saveDesignFormData, getDesignFormData, getAllTbale } from '@/api/system/desform/data/designFormData'
  const businessTypeOption = [
    { title: '项目', value: 'deal' },
    { title: '基金', value: 'fund' }
  ]
    export default {
        data() {
            return {
              relevancyOnlineOption: [],
              businessTypeOption: businessTypeOption,
              openDes: true,
              checkFlag: true,
              isRelevance: false,
                // 表单参数
                form: {},
                // 遮罩层
                loading: false,
                // 表单校验
                rules: {
                desformName: [
                    { required: true, message: this.$t('必填信息'), trigger: 'blur' }
                ],
                desformCode: [
                    { required: true, message: this.$t('必填信息'), trigger: 'blur' }
                ],
                onlineFormDataId: [
                  { required: true, message: this.$t('必填信息'), trigger: 'blur' }
                ],
                relevanceField: [
                  { required: true, message: this.$t('必填信息'), trigger: 'blur' }
                ],
                relevanceType: [
                    { required: true, message: this.$t('必填信息'), trigger: 'blur' }
                ]
                }
            }
        },
        created() {
          this.findTable()
        },
        methods: {
            // 初始化数据
            init(data) {
                this.loading = true
                if (data != null && data.id !== undefined) {
                    getDesignFormData(data.id).then(response => {
                        this.checkFlag = false
                        this.openDes = false
                        this.form = response.data
                        this.form.isRelevance = response.data.isRelevance === '1'
                        this.loading = false
                    })
                } else {
                    this.reset()
                    this.checkFlag = true
                    this.openDes = true
                    this.loading = false
                }
            },
            // 表单重置
            reset() {
                this.form = {
                    id: undefined,

                    desformId: undefined,

                    desformCode: undefined,

                    desformName: undefined,

                    desformDataJson: undefined,

                    onlineFormCode: undefined,

                    onlineFormDataId: undefined,

                    createBy: undefined,

                    createTime: undefined,

                    updateBy: undefined,

                    updateTime: undefined

                }
                this.resetForm('form')
            },
            // 取消按钮
            cancel() {
                this.$parent.$parent.formOpen = false
                this.$parent.$parent.reset()
            },
            // 关闭form页面
            closeForm() {
                // 关闭form页面遮罩层
                this.loading = false
                // 关闭form页面
                if (this.$parent.$parent.formOpen !== undefined) {
                  this.$parent.$parent.formOpen = false
                }
                // 刷新list页面
                if (this.$parent.$parent.getList !== undefined) {
                  this.$parent.$parent.getList()
                }
            },
            /** 提交按钮 */
            submitForm: function() {
                this.$refs['form'].validate(valid => {
                    if (valid) {
                        this.loading = true
                        this.form.isRelevance = this.form.isRelevance ? 1 : 0
                        saveDesignFormData(this.form).then(response => {
                            if (response.code === 200) {
                                this.msgSuccess(this.$t('保存成功'))
                                if (this.openDes) {
                               // 跳转到表单设计器页面
                                const { href } = this.$router.resolve({ path: '/designModel',
                                query: { headId: this.form.onlineFormDataId }})
                                window.open(href, '_blank')
                                }
                                this.closeForm()
                            } else {
                                this.msgError(response.msg)
                            }
                            this.loading = false
                        })
                    } else {
                       this.locationError(document)
                    }
                })
           },
            // desformCode 失去焦点事件
          handleDesformCodeBlur(event) {
            const { target: { value: desformCode }} = event
            if (typeof desformCode === 'string' && /[A-Z]/.test(desformCode)) {
            this.$message('不支持大写字母')
          // this.form.setFieldsValue({ desformCode: desformCode.toLowerCase() })
        }
      },
       findTable() {
        getAllTbale().then(response => {
         this.relevancyOnlineOption = response.data
    })
   },
   isRelevanceChange(v) {
       if (v) {
        // const tbId = this.form.onlineFormDataId
        // if (tbId) {
        //   this.loading = true
        //   getCurrentHeadDetailsById(tbId).then(response => {
        //     if (response.data.relevanceField) {
        //        this.form.relevanceField = response.data.relevanceField
        //     }
        //     if (response.data.relevanceType) {
        //          this.form.relevanceType = response.data.relevanceType
        //     }

        //          this.loading = false
        //   })
        // }
       }
    }
  }

    }
</script>
